<template>
  <div class="error">
    <h2>您正在访问：{{ $route.path }}</h2>
    <div class="detail">
      <div class="flag">
        <img src="/images/notfound.png" />
      </div>
      <div class="info">
        <h3>抱歉，页面未找到</h3>
        <div>
          <a @click="back">返回</a>
          <router-link :to="{ path: '/', query: { lnk: 'back' } }">返回首页</router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {};
    },
    methods: {
      back() {
        this.$router.back();

        setTimeout(() => {
          this.$eventBus.emit('bs-back');
        }, 10);
      }
    }
  };
</script>

<style lang="less" scoped>
  .error {
    background-color: #fff;
    margin-top: 5px;

    > h2 {
      font-weight: bold;
      padding: 5px 15px;
    }

    > .detail {
      display: flex;
      flex-flow: row nowrap;
      margin: auto !important;
      text-align: center;
      align-items: center;
      align-content: center;
      height: 100%;

      > .flag {
        flex: 1.28;
        text-align: right;
      }

      > .info {
        flex: 1;
        cursor: default;
        text-align: left;

        > h3 {
          color: #000000;
          font-size: 24px;
          font-weight: 400;
        }

        > div {
          > a {
            color: #1e91e8;
            cursor: pointer;
            margin-right: 5px;

            &:last-of-type {
              margin-right: 0;
              margin-left: 5px;
            }

            &:hover {
              padding-bottom: 5px;
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
</style>
